<template>
    <div class="footer">
        <div class="iconfont">&#xe60e;<span class="font">票面价是指通过景区指定窗口售卖的纸质门票上标注的价格</span></div>

       <div class="footer-icon-left">
           <div class="iconfont">&#xe654;飞机</div>
       </div>

       <div class="footer-icon-center">
           <div class="iconfont">&#xe617;酒店</div>
       </div>

       <div class="footer-icon-right">
            <div class="iconfont">&#xe618;公寓</div>
       </div>
    
     <div class="footer-footer">
         <div class="chumo">触摸板</div>
         <div class="pc">电脑版</div>

          <span class="opition">Qunar 京ICP备05021087意见反馈</span>
     </div>
      

    </div>
</template>
<script>
    export default {
        name: 'HomeFooter',
        data(){
            return {

            }
        }
    }
</script>
<style  lang="stylus" scoped>
@import '~styles/mixins.styl'

.footer {
   margin-top: .4rem;
}

.font {
    font-size: .1rem;
    color: #7A7A7A;
    ellipsis()
}

.footer {
     line-height: .86rem;
     background-color: #ccc;
}

.footer-icon-left {
    width: 30%;
    float: left;
    margin-left: 4%;

}

.footer-icon-left .iconfont{
    font-size:.50rem;
    
}

.footer-icon-center {
    width: 30%;
    float: left;
    margin-left: 3%;
}

.footer-icon-center .iconfont{
    font-size:.50rem;
    
}

.footer-icon-right {
    width: 30%;
    float: left;
    margin-left: 3%;
    border-bottom: 1px solid #ccc;
}

.footer-icon-right .iconfont{
    font-size:.50rem;
}

.chumo {
    float:left;
    text-align: center;
    padding-left: 30%;
   
}

.pc {
    float:left;
    margin-right: 30%;
    margin-left:10%;
}

.opition {
    width: 100%;
    margin-left: 20%;
    color: #838B8B;

}

    
</style>